<template>
  <div class="number-renderer" :style="containerStyle">
    <span class="number-value">{{ formattedValue }}</span>
    <span v-if="showUnit && paramConfig?.unit" class="number-unit">{{ paramConfig.unit }}</span>
  </div>
</template>

<script>
import { findParamByCode } from '@/utils/tools'

export default {
  name: 'NumberRenderer',
  props: {
    component: {
      type: Object,
      required: true
    },
    config: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'design'
    },
    testData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    paramConfig() {
      const { content = {} } = this.component
      return findParamByCode(content.paramCode, this.config.paramGroups)
    },
    
    rawValue() {
      const { content = {} } = this.component
      if (this.mode === 'design') {
        return content.defaultValue || 0
      }
      return this.testData[content.paramCode] || 0
    },
    
    formattedValue() {
      const precision = this.component.content?.precision ?? this.paramConfig?.precision ?? 2
      const value = Number(this.rawValue)
      
      if (isNaN(value)) return '-'
      
      return value.toFixed(precision)
    },
    
    showUnit() {
      const { content = {} } = this.component
      return content.showUnit !== false
    },
    
    containerStyle() {
      const { content = {} } = this.component
      return {
        textAlign: content.align || 'left',
        fontSize: `${content.fontSize || 14}px`,
        fontWeight: content.fontWeight || 'normal',
        color: content.color || '#000000'
      }
    }
  }
}
</script>

<style scoped>
.number-renderer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  box-sizing: border-box;
}

.number-value {
  font-family: 'Arial', sans-serif;
}

.number-unit {
  color: #666;
  font-size: 0.9em;
}
</style>